<script setup lang="ts">
import insertLeft from '../assets/insertLeft.svg'
import insertRight from '../assets/insertRight.svg'
import insertTop from '../assets/insertTop.svg'
import insertBottom from '../assets/insertBottom.svg'

import deleteRow from '../assets/deleteRow.svg'
import deleteCol from '../assets/deleteCol.svg'
import { Direction } from '../models/Table'
import { FloatToolsEmitType } from '../models/floatTools/floatToolsEmit'

defineProps<{
    dir?: Direction
}>()
const emit = defineEmits<{
    (e:'clickBtn', type:FloatToolsEmitType):void
}>()
</script>

<template>
<div class="floatToolsForLineVue">
    <div v-if="dir=='horizontal'" class="floatToolsForLineHori">
        <div>
            <img @click="emit('clickBtn', 'insert_top')" :src="insertTop" title="顶部插入一行"/>
            <img @click="emit('clickBtn', 'insert_bottom')" :src="insertBottom" title="底部插入一行"/>
        </div>
        <div>
            <img @click="emit('clickBtn', 'delete_horizontal')" :src="deleteRow" title="删除本行"/>
        </div>
    </div>
    <div v-else class="floatToolsForLineVert">
        <div>
            <img @click="emit('clickBtn', 'insert_left')" :src="insertLeft" title="左侧插入一行"/>
            <img @click="emit('clickBtn', 'insert_right')" :src="insertRight" title="右侧插入一行"/>
        </div>
        <div>
            <img @click="emit('clickBtn', 'delete_vertical')" :src="deleteCol" title="删除本列"/>
        </div>
    </div>
</div>
</template>

<style scoped>
    img:hover{
        background-color: #ccc;
    }
    img{
        width:33px;
        height:33px;
        object-fit:contain;
        background-color: #fff;
        transition: 0.5s;
        cursor: pointer;
    }
    .floatToolsForLineVue>div{
        display: flex;
    }
    .floatToolsForLineVue>div>div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .floatToolsForLineHori{
        flex-direction: row;
    }
    .floatToolsForLineHori>div{
        flex-direction: column;
    }
    .floatToolsForLineVert{
        flex-direction: column;
    }
    .floatToolsForLineVert>div{
        flex-direction: row;
    }
</style>